<template>
	<el-card>
		<el-form :model="queryParams" :inline="true" label-width="88px" class="demo-dynamic">
			<el-form-item label="模版名称" prop="templateName">
				<el-input v-model="queryParams.templateName" placeholder="请输入模版名称" clearable size="small" />
			</el-form-item>
			<el-form-item label="商城未税价加点方式" prop="pointType" label-width="140px">
				<el-select size="small" v-model="queryParams.pointType" placeholder="请选择商城未税价加点方式" filterable>
					<el-option v-for="item in pointTypeList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item> 
			<el-form-item label="协议未税价加点方式" prop="initPointType" label-width="140px">
				<el-select size="small" v-model="queryParams.initPointType" placeholder="请选择协议未税价加点方式" filterable>
					<el-option v-for="item in pointTypeList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间" prop="createTime">
					<el-date-picker clearable size="small" style="width: 180px" v-model="queryParams.createTime"
						type="date" value-format="yyyy-MM-dd" placeholder="选择创建时间">
					</el-date-picker>
				</el-form-item>
			<el-form-item class="mt">
				<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
				<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
			</el-form-item> 
		</el-form>
		
		<el-row>
			<el-col :span="2" :offset="22">
				<el-button type="primary" size="small" icon="el-icon-plus" @click="handleTemplateAdd">
					新建模版
				</el-button>
			</el-col>
		</el-row>
		
		<el-table v-loading="loading" :data="list">
			<el-table-column label="模版名称" width="200" align="center" fixed="left" prop="templateName">
				<template slot-scope="scope">
						<el-tooltip :content="scope.row.templateName" placement="bottom" effect="dark" class="goodsNameBox">
							<div>{{ scope.row.templateName }}</div>
						</el-tooltip>
					</template>
			</el-table-column>
			<el-table-column label="商城未税价加点方式" align="center"  width="160px" prop="pointType">
				<template slot-scope="scope">
					<div v-if="scope.row.pointType == '1'">
						百分比
					</div>
					<div v-if="scope.row.pointType == '2'">
						固定值
					</div> 
				</template>
			</el-table-column>
			<el-table-column label="商城未税价加点值" width="140px" align="right" prop="point" />
			<el-table-column label="协议未税价加点方式" width="160px" align="center"  prop="initPointType">
				<template slot-scope="scope">
					<div v-if="scope.row.initPointType == '1'">
						百分比
					</div>
					<div v-if="scope.row.initPointType == '2'">
						固定值
					</div> 
				</template>
			</el-table-column>
			<el-table-column label="协议未税价加点值" width="140px" align="right" prop="initPoint" />
			<el-table-column label="创建人"  align="center" width="100px" prop="createUserName" />
			<el-table-column label="创建时间" align="right" width="180px" prop="createTime" />
			<el-table-column label="更新人" align="center" width="100px" prop="updateUserName" />
			<el-table-column label="更新时间" align="right" width="180px" prop="updateTime" />
			<el-table-column label="操作" align="center" width="120px" fixed="right" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
					</el-button>
					<!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row)">删除
					</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<pagination 
			v-show="total>0" 
			:total="total" 
			:page.sync="queryParams.pageNum" 
			:limit.sync="queryParams.pageSize"
			@pagination="getList" 
		/>
		<el-dialog :title="title" :visible.sync="openTemplateDialog" v-if="openTemplateDialog" width="800px" append-to-body>
			<el-form :model="info" ref="templateDialogForm" :rules="rules" label-width="88px" class="template-dialog">
				<el-form-item label="模版名称" prop="templateName" label-width="200px">
					<el-input size="small" :max="20" v-model="info.templateName" placeholder="请输入价格模版名称，限制20字以内" filterable />
				</el-form-item>
				<el-form-item label="商城未税价加点方式" prop="pointType" label-width="200px">
					<el-select size="small" v-model="info.pointType" placeholder="请选择商城未税价加点方式" filterable>
						<el-option v-for="item in pointTypeList" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商城未税价加点值" prop="point" label-width="200px">
					<el-input size="small" v-model="info.point" placeholder="请输入商城未税价加点值" filterable />
				</el-form-item>
				<el-form-item label="协议未税价加点方式" prop="initPointType" label-width="200px">
					<el-select size="small" v-model="info.initPointType" placeholder="请选择协议未税价加点方式" filterable>
						<el-option v-for="item in pointTypeList" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="协议未税价加点值" prop="initPoint" label-width="200px">
					<el-input size="small" v-model="info.initPoint" placeholder="请输入协议未税价加点值" filterable />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</el-card>
</template>

<script>
import {
	priceTemplateListApi,
	deletePriceTemplateApi,
	addPriceTemplateApi,
	updatePriceTemplateApi
} from "@/api/itemPoolApi";
 
export default {
		name: "price_template",
		data() {
			return {
				loading: false,
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					templateName: null,
					pointType: null,
					initPointType: null,
					createTime: null
				}, 
				list: [],
				info: {},
				title: "",
				openTemplateDialog: false, 
				pointTypeList: [
					{
						value: "1",
						label: "百分比"
					},
					{
						value: "2",
						label: "固定值"
					}
				], 
				rules: {
					templateName: [{
						required: true,
						trigger: 'blur',
						message: '请输入价格模版名称，限制20字以内'
					}],
					pointType: [{
						required: true,
						trigger: 'change',
						message: '请选择商城未税价加点方式'
					}],
					point: [{
						required: true,
						trigger: 'blur',
						message: '请输入商城未税价加点值'
					}],
					initPointType: [{
						required: true,
						trigger: 'change',
						message: '请选择协议未税价加点方式'
					}],
					initPoint: [{
						required: true,
						trigger: 'blur',
						message: '请输入协议未税价加点值'
					}],
				}
			}
		},
		mounted() {
			this.getList(); 
		},
		methods: {
			getList() {
				this.loading = true;
				priceTemplateListApi(this.queryParams).then(res => {
					this.list = res.rows;
					this.total = res.total;
					this.loading = false;
				})
			},  
			handleQuery() {
				this.getList();
			},
			resetQuery() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					templateName: null,
					pointType: null,
					initPointType: null,
					createTime: null
				};
				this.getList();
			},
			handleTemplateAdd() { 
				this.title = "新建商品价格模版";
				this.openTemplateDialog = true;
				this.info = {};
			},
			handleEdit(row) {
				this.title = "编辑商品价格模版";
				this.info = row;
				this.openTemplateDialog = true;
			},
			handleDel(row) {
				this.$confirm(`确定删除该商品价格模版？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deletePriceTemplateApi(row.id).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getList();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			cancel() {
				this.openTemplateDialog = false;
				this.info = {};
				this.$message({
					type: 'info',
					message: '已取消'
				});
			},
			submitForm() {
				this.$refs.templateDialogForm.validate((valid) => {
					if (valid) {  
						let apiURL = addPriceTemplateApi;
						if (this.info.id) { 
							apiURL = updatePriceTemplateApi;
						}

						apiURL(this.info).then(() => {
							this.$message.success({
								message: this.title+ "操作成功！"
							})

							this.openTemplateDialog = false;  
							this.getList();
						}).catch(error => { 
							console.log(error);
						})
						this.info = {};
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.mt{
		margin-left: 40px;
	}
	.template-dialog{
		.el-input,.el-select{
			width: 400px;
		}
	}
	.goodsNameBox {
		overflow: hidden;
		max-width: 100%;
		white-space: nowrap;
		height: 25px;
		text-overflow: ellipsis;
	}
</style>